<template>
	<div>
		<home-head :city="city"></home-head>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icon :list="iconList"></home-icon>
		<home-recommend :list="recommendList"></home-recommend>
		<home-weekend :list="weekendList"></home-weekend>
	</div>
</template>

<script>
	import HomeHead from './components/head'
	import HomeSwiper from './components/swiper'
	import HomeIcon from './components/icon'
	import HomeRecommend from './components/recommend'
	import HomeWeekend from './components/weekend.vue'
	import axios from 'axios'
	export default {
		name:'Home',
		components:{
			HomeHead,
			HomeSwiper,
			HomeIcon,
			HomeRecommend,
			HomeWeekend,
		},
		data () {
			return {
				city:'',
				swiperList:[],
				iconList:[],
				recommendList:[],
				weekendList:[]
			}
		},
		mounted () {
			this.getHomeInfo()
		},
		methods:{
			getHomeInfo(){
				//这里用箭头函数 this不会发生变化， 如果还是then(function(res){asda})这么写的话 this会产生变化
				axios.get('/api/index.json').then((res)=>{
					var res=res.data;
					if(res.ret && res.data){
						this.city = res.data.city;
						this.swiperList=res.data.swiperList;
						this.iconList=res.data.iconList;
						this.recommendList=res.data.recommendList;
						this.weekendList=res.data.weekendList;
					}
				})
			}
		}
	}
</script>

<style>
	
</style>